<template>
	<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
		<a-row>
			<a-row :gutter="24">
				<a-col :span="12" pul="3">
					<a-form-model-item ref="name" label="公告标题" prop="roleName">
						<a-input
							@blur="
								() => {
									$refs.name.onFieldBlur();
								}
							"
						/>
					</a-form-model-item>
				</a-col>
				<a-col :span="12" :warpper="8">
					<a-form-model-item ref="roleKey" label="参数名称" prop="configName">
						<a-input
							@blur="
								() => {
									$refs.name.onFieldBlur();
								}
							"
						/>
					</a-form-model-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="12" :warpper="8">
					<a-form-item label="状态" prop="status">
						<a-radio-group v-model="value" @change="onChange">
							<a-radio :value="1"> 正常 </a-radio>
							<a-radio :value="2"> 关闭</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>

			<a-row>
				<a-col :span="12" :warpper="8">
					<!-- <a-form-model-item ref="noticeContent" label="内容" prop="noticeContent">
						<a-input :disabled="!readOnly && typeof form.id !== 'undefined'" v-model="form.noticeContent" placeholder="请输入内容" />
					</a-form-model-item> -->
					<!-- <a-form-model-item label="备注" prop="remark">
						<a-input v-model="form.desc" type="textarea" />
					</a-form-model-item> -->
					<a-form-model-item label="备注" prop="remark">
						<a-textarea placeholder="请输入" />
					</a-form-model-item>
				</a-col>
			</a-row>
			<a-form-item :wrapper-col="{ span: 24, offset: 10 }">
				<a-button type="primary" html-type="submit"> 提交 </a-button>
			</a-form-item>
		</a-row>
	</a-form-model>
</template>
<script>
export default {
	data() {
		return {
			readOnly: false,
			expandedKeys: ['0-0-0', '0-0-1'],
			autoExpandParent: true,
			checkedKeys: ['0-0-0'],
			selectedKeys: [],

			value: 3,
			labelCol: { span: 4 },
			wrapperCol: { span: 14 },
			other: '',
			form: {
				roleId: '',
				roleKey: 'admin',
				roleName: 'admin',
				roleSort: '1',
				status: '',
				createTime: '',
				desc: '',
			},
			rules: {
				configName: [{ required: true, message: '请输入参数名称', trigger: 'change' }],
				roleKey: [{ required: true, message: '  请输入参数键名', trigger: 'change' }],
				roleName: [{ required: true, message: '请输入参数键值', trigger: 'change' }],
				type: [
					{
						type: 'array',
						required: true,
						message: 'Please select at least one activity type',
						trigger: 'change',
					},
				],
				resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
				desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
			},
		};
	},
	watch: {
		checkedKeys(val) {
			console.log('onCheck', val);
		},
	},
	methods: {
		// 由于要用传进来的值做判断,将显示和隐藏放在内部做处理
		show(data, readOnly) {
			if (data) {
				// 修改行为
				this.form = Object.assign({}, data) || {};
				if (this.noticeVditorIsInit) {
					this.$refs.noticeVditor.setContent(this.form.noticeContent);
				}
			} else {
				// 新增行为
				this.reset();
			}
			// if (data) this.form = Object.assign({}, data) || {}
			this.readOnly = typeof readOnly !== 'undefined' ? readOnly === true : false;
			this.visible = true;
		},
		//
		handleCheckedTreeNodeAll() {
			console.log(this.handleCheckedTreeNodeAll);
		},
		handleCheckedTreeExpand(value) {
			console.log(this.handleCheckedTreeExpand);
		},
		// 树权限（父子联动）
		handleCheckedTreeConnect(value) {
			console.log(this.handleCheckedTreeConnect);
		},
		onExpand(expandedKeys) {
			console.log('onExpand', expandedKeys);

			this.expandedKeys = expandedKeys;
			this.autoExpandParent = false;
		},
		onCheck(checkedKeys) {
			console.log('onCheck', checkedKeys);
			this.checkedKeys = checkedKeys;
		},
		onSelect(selectedKeys, info) {
			console.log('onSelect', info);
			this.selectedKeys = selectedKeys;
		},
		onChange(value) {
			console.log('changed', value);
		},
		onSubmit() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					alert('submit!');
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm() {
			this.$refs.ruleForm.resetFields();
		},
		// 表示已经关闭过一次了,所以一定是初始化完成了的
		childrenMounted() {
			this.noticeVditorIsInit = true;
		},
	},
};
</script>
